import React, {createContext, useContext} from "react";
import {ToastContext} from '../../components/Toast/ToastContext';
import Game from "../../components/TicTacToe";

const Context = createContext({});

/* 用useContext方式 */
const DemoContext = () => {
  const value = useContext(Context)
  /* my name is alien */
  return <div> my name is {value.name}</div>
}
/* 用Context.Consumer 方式 */
const DemoContext1 = () => {
  return <Context.Consumer>
    {(value) => <div> my age is {value.age}</div>}
  </Context.Consumer>
}

const MathSth = () => {
  const {showToast, hideToast} = useContext(ToastContext);
  const handleShow = () => {
    showToast('Hello, Toast!');
  };
  const handleClose = () => {
    hideToast();
  };
  return <div>
    <Context.Provider value={{name: 'alien', age: 18}}>
      <DemoContext/>
      <DemoContext1/>
    </Context.Provider>
    <button onClick={handleShow}>Show Toast</button>
    <button onClick={handleClose}>Close Toast</button>
    <Game></Game>
  </div>
}

export default MathSth;


